<%--
  Created by IntelliJ IDEA.
  User: zr
  Date: 2024/12/18
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!-- 添加员工按钮 -->
    <el-button type="primary" @click="dialogFormVisible = true">添加员工</el-button>
    <!-- 添加员工对话框 -->
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
        <!-- 表单，绑定到 addData 对象 -->
        <el-form :model="addData" :rules="rules" ref="addForm" label-width="120px" class="demo-addForm">
            <!-- 员工姓名输入框 -->
            <el-form-item label="员工姓名" prop="empName">
                <el-input v-model="addData.empName" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工岗位输入框 -->
            <el-form-item label="员工岗位" prop="empJob">
                <el-input v-model="addData.empJob" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工工资输入框 -->
            <el-form-item label="员工工资" prop="empSalary">
                <el-input v-model.number="addData.empSalary" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工部门选择框 -->
            <el-form-item label="员工部门" prop="did">
                <el-select v-model="addData.did" placeholder="请选择部门">
                    <!-- 遍历 depts 数组，生成选项 -->
                    <el-option v-for="d in depts" :key="d.deptId" :label="d.deptName" :value="d.deptId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 对话框底部操作按钮 -->
        <div slot="footer" class="dialog-footer">
            <!-- 取消按钮，点击后关闭对话框 -->
            <el-button @click="dialogFormVisible = false">取 消</el-button>

            <!-- 确定按钮，点击后调用 submitForm 方法 -->
            <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible2">
        <!-- 表单，绑定到 addData 对象 -->
        <el-form :model="editData" :rules="rules" ref="editData" label-width="120px" class="demo-addForm">
            <!-- 员工姓名输入框 -->
            <el-form-item label="员工姓名" prop="empName">
                <el-input v-model="editData.empName" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工岗位输入框 -->
            <el-form-item label="员工岗位" prop="empJob">
                <el-input v-model="editData.empJob" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工工资输入框 -->
            <el-form-item label="员工工资" prop="empSalary">
                <el-input v-model.number="editData.empSalary" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 员工部门选择框 -->
            <el-form-item label="员工部门" prop="did">
                <el-select v-model="editData.did" placeholder="请选择部门">
                    <!-- 遍历 depts 数组，生成选项 -->
                    <el-option v-for="d in depts" :key="d.deptId" :label="d.deptName" :value="d.deptId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 对话框底部操作按钮 -->
        <div slot="footer" class="dialog-footer">
            <!-- 取消按钮，点击后关闭对话框 -->
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>

            <!-- 确定按钮，点击后调用 submitForm 方法 -->
            <el-button type="primary" @click="confirmEditEmp()">确 定</el-button>
        </div>
    </el-dialog>
    <table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <el-table
                    :data="emp"
                    style="width: 100%">
                <el-table-column
                        prop="empId"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="empName"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="empJob"
                        label="职位">
                </el-table-column>
                <el-table-column
                        prop="empSalary"
                        label="工资">
                </el-table-column>
                <el-table-column
                        prop="dept.deptName"
                        label="部门名">
                </el-table-column>
                <el-table-column
                        prop="images"
                        label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.images" width="50px" height="50px">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row)" icon="el-icon-edit-outline">修改</el-button>
                        <el-button type="danger" @click="del(scope.row.empId)" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </tr>
    </table>
</div>

</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            // 员工信息
            emp: [],
            // depts部门信息
            depts: [],
            //控制添加是否显示
            dialogFormVisible: false,
            //控制编辑是否显示
            dialogFormVisible2: false,
            //存储修改的数据
            editData:{},
            // 表单数据对象
            addData: {
                empName: null,
                empJob: null,
                empSalary: null,
                images: null,
                did: null
            },
            // 表单验证规则
            rules: {
                empName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                ],
                empJob: [
                    { required: true, message: '请输入职位', trigger: 'blur' },
                    { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                ],
                empSalary: [
                    { required: true, message: '请输入工资', trigger: 'blur' },
                    { type: 'number', message: '工资必须为数字', trigger: 'blur' }
                ],
                did: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ]
            }
        },
        created() {
            // 页面加载后加载所有的信息
            this.xsEmp();
            // 获取部门信息
            this.dept();
        },
        methods: {
            //修改按钮事件
            edit(row){
                this.dialogFormVisible2 = true;
                this.editData = row;

            },
            //确认修改
            confirmEditEmp(){
                axios.post("/emp/confirmUpdate",this.editData).then(msg =>{
                    if (msg.data === 1) {
                        //关闭弹窗
                        this.dialogFormVisible2 = false;
                        this.xsEmp();
                        this.$message.success("修改成功");
                    }
                })
            },
            // 获得部门信息
            dept() {
                axios.get("/dept/listDept").then(msg => {
                    this.depts = msg.data;
                })
            },
            // 添加信息
            addEmployee() {
                axios.post("/emp/insert", this.addData).then(resp => {
                    if (resp.data === 1) {
                        // 关闭弹窗
                        this.dialogFormVisible = false;
                        // 刷新
                        this.xsEmp();
                        // 提示
                        this.$message.success("添加成功")
                        // 清空表单数据
                        this.addData = {
                            empName: null,
                            empJob: null,
                            empSalary: null,
                            images: null,
                            did: null
                        };
                    } else {
                        this.$message.error("添加失败");
                    }
                })
            },
            // 获取员工信息
            xsEmp() {
                axios.get("/emp/listJson").then(resp => {
                    this.emp = resp.data;
                })
            },
            // 根据id删除员工
            del(id) {
                this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/emp/delete?id=" + id).then(msg => { // 缩写
                        if (msg.data === 1) {
                            // 删除成功加载刷新
                            app.xsEmp();
                            // 提示
                            app.$message.success("删除成功")
                        } else {
                            // 提示
                            app.$message.error("删除失败")
                        }
                    })
                })
            },
            // 提交表单时进行验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addEmployee();
                    } else {
                        console.log('表单验证失败');
                        return false;
                    }
                });
            },
            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
<script>
    // 添加员工的函数
    function addEmp() {
        location.href = "/views/emp/add.jsp";
    }
    // 退出登录的函数
    function logout() {
        location.href = "/user?method=logout";
    }
</script>

</html>
